<swal title="Delete?"
      text="User will be deleted permanently. This action cannot be reversed."
      type="warning"
      [showCancelButton]="true"
      (confirm)="delete()"
      #deleteAlert>
</swal>
<swal title="Unlock?"
      text="User will be unlocked permanently. This action cannot be reversed."
      type="warning"
      [showCancelButton]="true"
      (confirm)="unlock()"
      #unlockAlert>
</swal>
<swal [title]="!user?.blocked ? 'Block?' : 'Unblock?'"
      [text]="!user?.blocked ? 'User will be blocked. You can revert this action later.' : 'User will be unblocked. You can revert this action later.'"
      type="warning"
      [showCancelButton]="true"
      (confirm)="toggleBlock()"
      #blockAlert>
</swal>
<ng-template let-modal
             #content>
    <div class="modal-header">
        <h4 class="modal-title"
            id="modal-basic-title">
            Reset Password
        </h4>
        <button type="button"
                class="close"
                aria-label="Close"
                (click)="modal.dismiss()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form class="needs-validation"
              *ngIf="user"
              [ngClass]="{ 'was-validated': userPasswordform.submitted }"
              (ngSubmit)="userPasswordform.form.valid && resetPassword()"
              novalidate
              #userPasswordform="ngForm">
            <app-validation-summary [problemDetails]="problemDetails"
                                    #validationSummary>
            </app-validation-summary>
            <div class="form-group">
                <label for="user-new-password">Password (*)</label>
                <input type="password"
                       class="form-control"
                       id="user-new-password"
                       name="user-new-password"
                       [(ngModel)]="newPassword"
                       #userNewPassword="ngModel"
                       required>
                <div *ngIf="userPasswordform.submitted && userNewPassword.invalid"
                     class="form-control-feedback text-danger">
                    Field 'Password' is required.
                </div>
            </div>
            <div class="form-group">
                <div class="form-check col-form-label custom-control custom-checkbox">
                    <input class="form-check-input custom-control-input"
                           type="checkbox"
                           id="change-password-after-first-sign-in-check"
                           name="change-password-after-first-sign-in-check"
                           [(ngModel)]="changePasswordAfterFirstSignIn"
                           #changePasswordAfterFirstSignInCheck="ngModel" />
                    <label class="custom-control-label"
                           for="change-password-after-first-sign-in-check">
                        Require this user to change their password when they first sign in
                    </label>
                </div>
            </div>
            <button type="submit"
                    class="btn btn-primary">
                Reset
            </button>
        </form>
    </div>
</ng-template>
<p *ngIf="!user">Loading user data...</p>
<form class="needs-validation"
      *ngIf="user"
      [ngClass]="{ 'was-validated': form.submitted }"
      (ngSubmit)="form.form.valid && update()"
      novalidate
      #form="ngForm">
    <div class="alert alert-warning d-flex align-items-center justify-content-between"
         role="alert"
         *ngIf="user.accessFailedCount > 0 && user.lockoutEnd">
        <b class="flex-fill">
            User is locked until {{ user.lockoutEnd | date: 'medium' }} after {{ user.accessFailedCount }} failed logins.
        </b>
        <button type="button"
                class="btn btn-secondary"
                (click)="unlockAlert.fire()">
            Unlock
        </button>
    </div>
    <div class="form-group row">
        <label for="user-name"
               class="col-sm-2 col-form-label">
            Username (*)
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="user-name"
                   name="user-name"
                   [(ngModel)]="user.userName"
                   maxlength="256"
                   required
                   #userName="ngModel" />
            <div *ngIf="form.submitted && userName.invalid"
                 class="form-control-feedback text-danger">
                Field 'Username' is required.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="user-email"
               class="col-sm-2 col-form-label">
            Email (*)
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="user-email"
                   name="user-email"
                   [(ngModel)]="user.email"
                   maxlength="256"
                   required
                   email
                   #email="ngModel" />
            <div *ngIf="form.submitted && email.invalid && email.errors['required']"
                 class="form-control-feedback text-danger">
                Field 'Email' is required.
            </div>
            <div *ngIf="form.submitted && email.invalid && email.errors['email']"
                 class="form-control-feedback text-danger">
                Please enter a valid email address.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="user-email-confirmed"
               class="col-sm-2 col-form-label">
            Email Confirmed
        </label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       id="user-email-confirmed"
                       name="user-email-confirmed"
                       [(ngModel)]="user.emailConfirmed"
                       disabled
                       #emailConfirmed="ngModel" />
                <label class="custom-control-label"
                       for="user-email-confirmed">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="user-create-date"
               class="col-sm-2 col-form-label">
            Create Date
        </label>
        <div class="col-sm-10 col-form-label">
            <span class="col-form-label"
                  id="user-create-date"
                  name="user-create-date">
                {{ user.createDate | date: 'medium' }}
            </span>
        </div>
    </div>
    <div class="form-group row">
        <label for="user-phone-number"
               class="col-sm-2 col-form-label">
            Phone Number
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="tel"
                   id="user-phone-number"
                   name="user-phone-number"
                   [(ngModel)]="user.phoneNumber" />
        </div>
    </div>
    <div class="form-group row">
        <label for="user-phone-number-confirmed"
               class="col-sm-2 col-form-label">
            Phone Number Confirmed
        </label>
        <div class="col-sm-10">
            <div class="form-check col-form-label custom-control custom-checkbox">
                <input class="form-check-input custom-control-input"
                       type="checkbox"
                       id="user-phone-number-confirmed"
                       name="user-phone-number-confirmed"
                       [(ngModel)]="user.phoneNumberConfirmed"
                       disabled
                       #phoneNumberConfirmed="ngModel" />
                <label class="custom-control-label"
                       for="user-phone-number-confirmed">
                </label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="resource-type"
               class="col-sm-2 col-form-label">
            Password Expires
        </label>
        <div class="col-sm-10">
            <select class="form-control custom-select"
                    id="user-password-expiration-policy"
                    name="user-password-expiration-policy"
                    [(ngModel)]="userPasswordExpirationPolicy"
                    #passwordExpirationPolicy="ngModel">
                <option value="">Please select a password expiration policy</option>
                <option value="Never">Never</option>
                <option value="NextLogin">In next login</option>
                <option value="Monthly">Monthly</option>
                <option value="Quarterly">Quarterly</option>
                <option value="Semesterly">Semesterly</option>
                <option value="Anually">Anually</option>
                <option value="Bianually">Bianually</option>
            </select>
        </div>
    </div>
    <div class="form-group row"
         *ngFor="let claim of requiredClaims; let i = index">
        <label [for]="'user-' + claim.name"
               class="col-sm-2 col-form-label">{{ claim.displayName || claim.name }} (*)</label>
        <div class="col-sm-10">
            <app-dynamic-input [id]="'user-' + claim.name"
                               [name]="'user-' + claim.name"
                               [pattern]="claim.rule"
                               [(ngModel)]="requiredClaims[i].value"
                               [modelType]="claim.valueType"
                               required
                               #input="ngModel">
            </app-dynamic-input>
            <div *ngIf="form.submitted && input.invalid && input.errors['required']"
                 class="form-control-feedback text-danger">
                Field '{{ claim.displayName || claim.name }}' is required.
            </div>
            <div *ngIf="form.submitted && input.invalid && input.errors['pattern']"
                 class="form-control-feedback text-danger">
                Pattern not correct.
            </div>
        </div>
    </div>
    <div class="form-group">
        <div>
            <button type="submit"
                    class="btn btn-primary m-r-5">
                <i class="material-icons align-middle">save</i>
                Save Changes
            </button>
            <button type="button"
                    class="btn btn-danger m-r-5 float-right"
                    (click)="deleteAlert.fire()"
                    [disabled]="currentUserId === user.id">
                <i class="material-icons align-middle">delete</i>
                Delete
            </button>
            <button type="button"
                    class="btn btn-secondary m-r-5 float-right"
                    (click)="blockAlert.fire()"
                    [disabled]="currentUserId === user.id">
                <i class="material-icons align-middle">{{ !user.blocked ? 'lock' : 'lock_open' }}</i>
                {{ !user.blocked ? 'Block' : 'Unblock' }}
            </button>
            <button type="button"
                    class="btn btn-secondary m-r-5 float-right"
                    (click)="showResetPassword(content)"
                    [disabled]="currentUserId === user.id">
                <i class="material-icons align-middle">vpn_key</i>
                Reset Password
            </button>
        </div>
    </div>
</form>